import React, {Suspense, lazy } from 'react';
import { Route, HashRouter, Switch } from "react-router-dom";

import './App.css';

// import Home from './pages/Home'
// import About from './pages/About'
// 路由懒加载写法
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));
const Login = lazy(() => import("./pages/Login"));

function App() {

  return (
    <HashRouter>
      <li><a href="#/">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#login">Login</a></li>
      <Suspense fallback={<div>loading...</div>}>
        <Switch>          
          <Route path="/" exact component={Home} />
          <Route path="/about" exact component={About} />
          <Route path="/login" exact component={Login} />
        </Switch>
      </Suspense>
    </HashRouter>
  );
}

export default App;
